<template>
	<view>
		<!-- 背景图 -->
		<view class="bg">
			<image src="../../../static/finishbg.png" mode=""></image>
		</view>
		
		<!--  作品名称-->
		<view class="title-bar">
			<view class="name">
				<text>“白派山水”嫡系画家——白启哲</text>
			</view>
			<view class="btn">
				<text>拍卖作品</text>
			</view>
		</view>
		
		<!-- 作者介绍 -->
		<view class="introduce">
			<u-read-more ref="uReadMore" color="#da242a" :toggle="true">
					<u-parse :html="content" style="text-align: justify;width: 90%;margin: 5%;" @load="parseLoaded"></u-parse>
				</u-read-more>
		</view>
		
		<!--tab栏-->
		<view class="tab-bar">
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#c6100e" height="80" bg-color="#f8f8f8" @change="change"></u-tabs>
		</view>

			<!-- 作品栏 -->

			
			<!-- 相册栏 -->

			
			<!-- 著作栏 -->

			<!-- 文章栏 -->
			<view class="article" v-if="this.current == 3">
				
				<view class="art-list"  @click="goToDetail">
					<view class="img">
						<image src="../../../static/007.jpg" mode=""></image>
					</view>
					<view class="introduce">
						<view class="title">
							<text>白启哲画展</text>
						</view>
						<view class="content">
							<text>白启哲为国家重要会堂、宾馆创作了许多巨幅山水画，不少作品还作为国家礼品，赠送给了外…</text>
						</view>
						<view class="time">
							<text>2021-03-04 10:00:00</text>
						</view>
					</view>
				</view>
			</view>
	</view>
	
	
</template>

<script> 
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				lists: [
				{
						title: '人类高质量前端',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
				},
				{
						title: '人类高质量前端',
						introduce: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
				},
				{
					title: '人类高质量前端',
					introduce: '李白杜甫白居易旗舰店',
					image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
				},
				{
					title: '人类高质量前端',
					introduce: '李白杜甫白居易旗舰店',
					image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
				}
				],
				list: [
								{
									name: '作品'
								}, 
								{
									name: '相册'
								}, 
								{
									name: '著作'
								}, 
								{
									name: '文章'
								}
							],
							current: 0,
				// 这是一段很长的文字，也可能包含有HTML标签等内容
				content: `国画大师白雪石长子
“白派山水”嫡系传人
中国美术家协会会员
白启哲，1935年出生，北京市人，中国美术家协会会员，是当今中国山水画坛著名艺术家白雪石之子，也是最得白派真传和成就最大的“白派山水”嫡传画家。
白启哲为国家重要会堂、宾馆创作了许多巨幅山水画，不少作品还作为国家礼品，赠送给了外国政府机构和元首。白启哲的山水画视觉效果好，空间感强，故很受社会的关注与好评，成为北京画坛上具有独特品格的艺术家。出版有《白启哲作品优选集》等专著。
他追求创新，创作多样化。多年来，为艺术突破和创新，白启哲游历祖国各地山川。说起他的山水画创作体验，他归结为3个字——多样化。首先是题材多样化。其父白雪石画桂林山水闻名于世，他更拓展了自己的绘画题材。他喜欢画民间传统的亭台楼阁，也喜欢画雪景、树木、各地山川。用他自己的话说就是“在自然中发现美”。`,
			}
				
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			parseLoaded() {
				this.$refs.uReadMore.init();
			},
			change(index) {
			  this.current = index
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.bg image {
		width: 100%;
	}
	
	.title-bar {
		display: flex;
		justify-content: space-around;
	}
	
	.title-bar .name {
		font-weight: 800;
	}
	
	.title-bar .btn {
		width: 160rpx;
		height: 40rpx;
		color: #da242a;
		border: 2rpx solid #da242a;
		font-size: 28rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 10rpx;
	}
	
	.tab-bar {
		margin-top: 20rpx;
	}
	
	.demo-warter {
		border-radius: 16rpx;
		margin: 10rpx;
		background-color: #ffffff;
		padding: 16rpx;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 8rpx;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 10rpx;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 10rpx;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 20rpx;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-introduce {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 10rpx;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 10rpx;
	}
	
	.art-list {
		display: flex;
		justify-content: space-around;
		background-color: #fefffe;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	
	.art-list image {
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	.introduce {
		margin: 10rpx 10rpx 0 0 ;
	}
	.introduce .title {
		font-weight: 800;
	}
	
	.introduce .content {
		font-size: 24rpx;
		color: #939393;
	}
	
	.introduce .time {
		font-size: 24rpx;
		color: #939393;
	}
</style>